<!--
 * @Author: chunlai
 * @Date: 2025-07-02 15:03:18
 * @LastEditTime: 2025-09-05 08:47:48
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\index\feecount\PlanRiskModal.vue
 * @Description: 险种试算因子选择
-->
<template>
  <div class="pre-count-modal">
    <div class="ms-pre-count-head">方案选择</div>
    <!--  -->
    <div class="factor-main">
      <van-field
        :input-align="inputAlign"
        label="投保计划"
        readonly
        v-if="mainRisk.plansList && mainRisk.plansList.length > 0"
      >
        <template #button>
          <MsRadios
            :curVal="mainRisk.planCode"
            :arrList="mainRisk.plansList"
            key="planCode"
            type="planCode"
            @change="changeRadio"
            v-if="mainRisk.plansList.length > 1"
          >
          </MsRadios>
          <div class="text-radio" v-else-if="mainRisk.plansList.length === 1">
            {{ mainRisk.plansList[0].label }}
          </div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        label="投保计划"
        readonly
        v-if="mainRisk.programmeName"
      >
        <template #button>
          <div class="text-radio">
            {{ mainRisk.programmeName }}
          </div>
        </template>
      </van-field>
      <van-field :input-align="inputAlign" label="缴费期间" readonly>
        <template #input>
          <MsRadios
            :curVal="mainRisk.payendyear"
            :arrList="mainRisk.payendyearList"
            key="payendyear"
            type="payendyear"
            @change="changeRadio"
            v-if="mainRisk.payendyearList && mainRisk.payendyearList.length > 0"
          >
          </MsRadios>
          <div class="text-radio" v-else>
            {{ formatUnitText("payendyear") }}
          </div>
        </template>
      </van-field>
      <van-field :input-align="inputAlign" label="保险期间" readonly>
        <template #input>
          <MsRadios
            :curVal="mainRisk.insuYear"
            :arrList="mainRisk.insureYearList"
            key="insuYear"
            type="insuYear"
            @change="changeRadio"
            v-if="mainRisk.insureYearList && mainRisk.insureYearList.length > 0"
          >
          </MsRadios>
          <div class="text-radio" v-else>
            {{ formatUnitText("insuYear") }}
          </div>
        </template>
      </van-field>
      <template v-if="mainRisk.haveMult">
        <van-field
          :input-align="inputAlign"
          label="购买份数"
          readonly
          v-if="['text', 'arr'].includes(mainRisk.multType || '')"
        >
          <template #button>
            <MsRadios
              :curVal="mainRisk.mult"
              :arrList="mainRisk.multList"
              key="mult"
              type="mult"
              @change="changeRadio"
              v-if="mainRisk.multType === 'arr'"
            >
            </MsRadios>
            <div class="text-radio" v-else-if="mainRisk.multType === 'text'">
              {{ mainRisk.mult }}<b class="unit">份</b>
            </div>
          </template>
        </van-field>
        <van-field
          :input-align="inputAlign"
          label="购买份数"
          v-model="mainRisk.mult"
          @blur="changMult($event.target.value, 'mult')"
          v-else
        >
          <template #button>
            <b class="unit">份</b>
          </template>
        </van-field>
      </template>

      <template v-if="mainRisk.amntType !== void 0">
        <van-field
          :input-align="inputAlign"
          label="基本保额"
          readonly
          v-if="mainRisk.amntType == 'arr'"
        >
          <template #input>
            <MsRadios
              :curVal="mainRisk.amnt"
              :arrList="mainRisk.amntList"
              key="amnt"
              type="amnt"
              @change="changeRadio"
            >
            </MsRadios>
          </template>
        </van-field>
        <van-field
          :input-align="inputAlign"
          label="基本保额"
          readonly
          v-else-if="mainRisk.amntType == 'text'"
        >
          <template #button>
            <div class="text-radio">
              {{ mainRisk.amnt || "0" }}<b class="unit">元</b>
            </div>
          </template>
        </van-field>
        <van-field
          :input-align="inputAlign"
          label="基本保额"
          v-model="mainRisk.amnt"
          @blur="changFactors($event.target.value, 'amnt')"
          v-else
        >
          <template #button>
            <b class="unit">元</b>
          </template>
        </van-field>
      </template>

      <van-field
        :input-align="inputAlign"
        label="首年保费"
        readonly
        v-if="mainRisk.premType === 'text'"
      >
        <template #input>
          <div class="text-radio">
            {{ mainRisk.prem || "0" }}<b class="unit">元</b>
          </div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        label="首年保费"
        v-model="mainRisk.prem"
        @blur="changFactors($event.target.value, 'prem')"
        v-else
      >
        <template #button>
          <b class="unit">元</b>
        </template>
      </van-field>
      <!-- 固定保障责任内容展示模块  -->
      <div
        class="cell3_main"
        v-if="
          mainRisk.dutyAmntPremTable && mainRisk.dutyAmntPremTable.length > 0
        "
      >
        <div class="dutys-label-box">
          <span class="dutys-name">{{ mainRisk.dutyTitle || "保障责任" }}</span>
        </div>
        <div class="cell3_value">
          <AmntPremTable :tables="mainRisk.dutyAmntPremTable" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AmntPremTable from "@/components/tables/AmntPremTable";
export default {
  name: "PlanRiskModal",
  components: { AmntPremTable },
  data() {
    return {
      inputAlign: "right",
    };
  },
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
      bbrMultList: "insert/bbrMultList",
    }),
    mainRisk() {
      let res = {};
      if (this.mainInsu && this.mainInsu.length > 0) {
        res = JSON.parse(JSON.stringify(this.mainInsu[0]));
      }
      return res;
    },
  },
  watch: {},
  created() {
    this.$store.dispatch("risks/setRisks", {});
  },
  mounted() {},
  methods: {
    formatUnitText(keyName) {
      let res = "";
      if (keyName == "insuYear") {
        if (this.mainRisk.insuYear == "106") {
          res = "终身";
        } else if (this.mainRisk.insuYear == "A") {
          res = `保至${this.mainRisk.insuYear}周岁`;
        } else if (this.mainRisk.insuYear == "D") {
          res = `${this.mainRisk.insuYear}天`;
        } else {
          res = `${this.mainRisk.insuYear}年`;
        }
      } else if (keyName == "payendyear") {
        if (this.mainRisk.payendyear.indexOf("交") > -1) {
          res = `${this.mainRisk.insuYear}`;
        } else {
          res = `${this.mainRisk.payendyear}年交`;
        }
      }
      return res;
    },
    changeRadio(type, ele) {
      this.changFactors(ele.value, type);
    },
    changMult(value, type) {
      const min = this.mainRisk.multMin,
        max = this.mainRisk.multMax;
      if (min && value < min) {
        this.mainRisk.mult = min;
      } else if (max && value > max) {
        this.mainRisk.mult = max;
      }
      this.changFactors(this.mainRisk.mult, type);
    },
    changFactors(val, type) {
      // console.log("aaaa");
      if (this.compEngName === "ansheng" && this.mainRiskCode === "P06017") {
        // 职业类别限制
        let insured = this.bbrMultList[0];
        if (
          ["P06020", "P06021"].includes(val) &&
          Number(insured.ocupationClass) > 3
        ) {
          this.$msAlert(`该计划职业类别只能为一类、二类、三类职业`);
          return;
        }
      }
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.mainRisk.varietyCode,
        type: type,
        val: val,
      });
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="less" scoped>
.factor-main {
  padding: 0 10px;
  .factor-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 5px 0;
    padding-right: 10px;
    border-bottom: 1px solid #e6e6e6;
    &-label {
      min-width: 60px;
      color: #606266;
      line-height: 32px;
      margin-right: 10px;
    }
    &-value {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
}

.text-radio {
  min-width: 45px;
  height: 32px;
  line-height: 32px;
  color: #303133;
  padding: 0;
  text-align: right;
}
.ms-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  input {
    width: 100%;
    height: 32px;
    border: none;
    text-align: right;
  }
}
.unit {
  color: #303133;
  margin-left: 4px;
  font-weight: 500;
}

.pre-count-modal {
  /deep/.van-cell {
    padding: 7px 5px 7px 0;
    &::after {
      right: 0;
      left: 0;
    }
  }
  /deep/.van-field__label {
    span {
      line-height: 28px;
      color: #606266;
    }
  }
  /deep/.van-field__control {
    color: #303133;
    height: 28px;
  }
  /deep/.van-field__button {
    padding-left: 2px;
  }
}
</style>
